<!--
 * @Author: chunlai
 * @Date: 2024-08-14 17:17:17
 * @LastEditTime: 2025-09-10 17:34:44
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\preinsure\exam\XinMei.vue
 * @Description: 信美-适当性调查评估问卷
-->
<template>
  <div class="question-nair-page bg-fff">
    <div class="pd14">
      <h3 class="talign_c">{{ configs.headLine }}</h3>
      <div class="line1"></div>
      <p
        class="tip-p ti_2 mt6 ft12"
        v-html="configs.tip1"
        v-if="configs.tip1"
      ></p>
    </div>
    <div class="block-gray" v-if="configs.tip1"></div>
    <div class="pd14">
      <p class="tip-p ft12" v-html="configs.tip2" v-if="configs.tip2"></p>
      <template v-for="(item, index) in quesList">
        <div
          class="model-box"
          :key="`ques${item.ImpartCode}-${index}`"
          v-if="item.title"
          :id="`exam${item.ImpartCode}`"
        >
          <p class="mb8">{{ item.title }}</p>
          <div class="ask-box">
            <van-radio-group v-model="item.value">
              <van-radio
                :name="opt.value"
                shape="square"
                checked-color="#f54040"
                icon-size="14px"
                v-for="(opt, j) in item.asks"
                :key="`asks-${j}`"
              >
                {{ `${opt.label}` }}
              </van-radio>
            </van-radio-group>
          </div>
        </div>
      </template>
    </div>
    <div class="fix_foot_box foot-sure-btn">
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        block
        round
        @click="tijiao"
        >提交问卷</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "XinMeiPingGuQues",
  data() {
    return {
      configs: {},
      quesList: [],
      totalCore: 0,
      eleId: "",
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      preInsConfig: "home/preInsConfig",
    }),
    jsonName() {
      return this.preInsConfig && this.preInsConfig.jsonName;
    },
    askFinish() {
      let res = true;
      const len = this.quesList.length;
      for (let i = 0; i < len; i++) {
        const item = this.quesList[i];
        if (item.title && item.value === 0) {
          this.eleId = `exam${item.ImpartCode}`;
          res = false;
          break;
        }
      }
      return res;
    },
    resultList() {
      return this.configs && this.configs.resultList;
    },
    resObj() {
      let obj =
        this.resultList.find(
          (ele) =>
            this.totalCore >= ele.minRange && this.totalCore <= ele.maxRange
        ) || {};
      return obj;
    },
  },
  watch: {
    quesList: {
      handler: function (val) {
        let coreVal = 0;
        const len = this.quesList.length;
        for (let i = 0; i < len; i++) {
          const item = this.quesList[i];
          if (item.title) {
            coreVal += item.value;
          }
        }
        this.totalCore = coreVal;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initPageConfig();
  },
  mounted() {},
  methods: {
    initPageConfig() {
      this.$store.commit("updateLoad", true);
      this.$store.dispatch("json/getNoticeJson", this.jsonName).then((res) => {
        this.configs = res;
        let quesArr = [];
        if (this.$getMessage("questionnaire")) {
          quesArr = this.$getMessage("questionnaire");
        } else {
          quesArr = res.DataList;
        }
        this.quesList = quesArr;
        this.$store.commit("updateLoad", false);
      });
    },
    tijiao() {
      // 计算评分
      if (!this.askFinish) {
        this.$GlobalFuns.removeToViewEle(this.eleId);
        return this.$toast("请完成问卷里所有题目的答案选择");
      }
      if (this.totalCore >= 7) {
        this.$baseAlert(
          `${this.resObj.suggest}`,
          () => {
            this.goNextStep();
          },
          "确认并继续投保"
        );
      } else {
        this.$dialog
          .confirm({
            title: "温馨提示",
            message: `${this.resObj.suggest}`,
            confirmButtonColor: "#DA251E",
            confirmButtonText: "确认并继续投保",
            cancelButtonText: "我再想想",
            showCancelButton: true,
          })
          .then(() => {
            this.goNextStep();
          })
          .catch(() => {});
      }
    },
    goNextStep() {
      this.$setMessage("questionnaire", this.quesList);
      this.$router.push("/form");
    },
    saveDatas() {
      let params = this.quesList.map((item) => {
        if (item.title) {
          item.ImpartContent = `${
            item.title +
            "a." +
            item.asks[0].label +
            "；b." +
            item.asks[1].label +
            "。得分____"
          }`;
          item.ImpartParammodle = `${item.value},${item.cores}`;
        } else {
          item.ImpartParammodle = `${this.totalCore},${this.resObj.type},${this.resObj.suggest}`;
        }
        return item;
      });
      this.submitApiInter(params);
    },
    submitApiInter(dataList) {
      this.$store.commit("updateLoad", true);
      let params = {
        ...this.apiComParams,
        IMPARTSTYPE: "7",
        IMPARTS: {
          LCStaffImpart: dataList,
          LCStaffImpartCount: dataList.length,
        },
      };
      this.$http
        .post("/ms-insure/mobile/common/updateNotifyInfo", {
          data: JSON.stringify(params),
        })
        .then(({ data }) => {
          if (data.code == "1") {
            this.$setMessage("questionnaire", dataList);
            this.$router.push("/form");
          }
          this.$store.commit("updateLoad", false);
        })
        .catch((err) => {
          this.$store.commit("updateLoad", false);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.model-box {
  padding: 12px 0;

  &:not(:last-child) {
    border-bottom: 1px solid #ebedf0;
  }
}

.ask-box {
  padding-left: 12px;
}

.block-gray {
  width: 100%;
  height: 6px;
  background-color: #f4f4f4;
}

.line1 {
  width: 100%;
  height: 5px;
  margin-top: 14px;
  border-top: 1px solid #4f77ab;
  border-bottom: 1px solid #4f77ab;
}

.tip-p {
  line-height: 1.5;
  color: #999;
}

.question-nair-page {
  padding-bottom: 100px;

  /deep/.van-radio {
    align-items: flex-start;

    &:not(:last-child) {
      margin-bottom: 6px;
    }
  }

  /deep/.van-radio__icon {
    margin-top: 3px;
  }
}

.foot-sure-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 14px;
}
</style>
